<template>
	<div class="tinymce-container editor-container">
		<textarea class="tinymce-textarea" :id="tinymceId"></textarea>
		<!-- <editor v-model="content" :init="init"></editor> -->
		<div class="editor-custom-btn-container" v-if="buttonshow">
			<editorImageOss color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImageOss>
		</div>
	</div>
</template>

<script>
	import editorImageOss from './components/editorImageOss';
	import '../../../public/tinymce4.7.5/langs/zh_CN';

	const plugins = [
		`advlist anchor autolink autosave code codesample colorpicker colorpicker
	  contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime
	  legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace
	  spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount`
	];
	const toolbar = [
		`bold italic underline strikethrough alignleft aligncenter
	  alignright outdent indent  blockquote undo redo removeformat code`,
		`hr bullist numlist link image charmap	 preview anchor pagebreak
	    fullscreen insertdatetime media table forecolor backcolor`
	];
	export default {
		name: 'tinymce',
		components: {
			editorImageOss
		},
		props: {
			id: {
				type: String
			},
			value: {
				type: String,
				default: ''
			},
			toolbar: {
				type: Array,
				required: false,
				default () {
					return [];
				}
			},
			menubar: {
				default: 'file edit insert view format table'
			},
			height: {
				type: Number,
				required: false,
				default: 360
			},
			width: {
				type: Number,
				required: false,
				default: 980
			},
			buttonshow: Boolean
		},
		data() {
			return {
				hasChange: false,
				hasInit: false,
				tinymceId: this.id || 'vue-tinymce-' + +new Date()
			};
		},
		watch: {
			value(val) {
				if (!this.hasChange && this.hasInit) {
					this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val));
				}
			}
		},
		mounted() {
			this.initTinymce();
		},
		activated() {
			this.initTinymce();
		},
		deactivated() {
			this.destroyTinymce();
		},
		methods: {
			initTinymce() {
				const _this = this;
				window.tinymce.init({
					selector: `#${this.tinymceId}`,
					width: this.width,
					height: this.height,
					language: 'zh_CN',
					body_class: 'panel-body ',
					object_resizing: false,
					toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
					menubar: false,
					plugins: plugins,
					content_style: "p {margin: 5px 0;}",
					fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
					font_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
					end_container_on_empty_block: true,
					powerpaste_word_import: 'clean',
					code_dialog_height: 450,
					code_dialog_width: 1000,
					advlist_bullet_styles: 'square',
					advlist_number_styles: 'default',
					imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
					default_link_target: '_blank',
					// forced_root_block: '',
					link_title: false,
					init_instance_callback: editor => {
						if (_this.value) {
							editor.setContent(_this.value);
						}
						_this.hasInit = true;
						editor.on('NodeChange Change KeyUp SetContent', () => {
							this.hasChange = true;
							this.$emit('input', editor.getContent());
						});
					}
				});
			},
			destroyTinymce() {
				if (window.tinymce.get(this.tinymceId)) {
					window.tinymce.get(this.tinymceId).destroy();
				}
			},
			setContent(value) {
				window.tinymce.get(this.tinymceId).setContent(value);
			},
			getContent() {
				window.tinymce.get(this.tinymceId).getContent();
			},
			imageSuccessCBK(arr) {
				const _this = this;
				arr.forEach(v => {
					window.tinymce.get(_this.tinymceId).insertContent(
						`<img class="wscnph height100" src="${v.url}" >`);
				});
				this.$emit('getImg', arr)
			}
		},
		destroyed() {
			this.destroyTinymce();
		}
	};
</script>

<style scoped>
	.tinymce-container {
		position: relative;
		width: 980px;
	}

	.tinymce-container>>>.mce-fullscreen {
		z-index: 10000;
	}

	.tinymce-textarea {
		visibility: hidden;
		z-index: -1;
	}

	.editor-custom-btn-container {
		position: absolute;
		right: 50px;
		top: 2px;
		/*z-index: 2005;*/
	}

	.editor-upload-btn {
		display: inline-block;
	}
</style>
<style></style>
